<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="width: 100%;height: 100%" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>动画测试</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/mdui/css/mdui.min.css}">
    <link rel="stylesheet" th:href="@{/animate/css/animate.min.css}">
    <script th:src="@{/player/lottie.js}"></script>
    <link type="text/css" rel="stylesheet" th:href="@{/materialize/css/materialize.min.css}" media="screen,projection"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="background-color:#ccc; margin: 0;height: 100%; font-family: sans-serif;font-size: 10px">

<div style="width:100%;height:100%;background-color:#333;" id="animation"></div>

<script>

    let animData = {
        wrapper: document.getElementById('animation'),
        animType: 'html',
        loop: true,
        prerender: true,
        autoplay: true,
        path: '../data.json'
    };
    bodymovin.loadAnimation(animData);
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/rxjs@6.2.2/bundles/rxjs.umd.min.js"></script>
<script th:src="@{/materialize/js/materialize.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/mdui/js/mdui.min.js}"></script>
<script th:src="@{/chart/js/Chart.js}"></script>
<script th:src="@{/chart/js/echarts.min.js}"></script>
</body>
</html>